<template>
  <div id="app">
    <Header></Header>
    <Nav></Nav>
    <Banner></Banner>
    <router-view/>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Nav from './components/Nav.vue'
import Banner from './components/Banner.vue'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    'Header': Header,
    'Nav': Nav,
    'Banner': Banner
  }
}
</script>

<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  li {
    list-style-type: none;
  }
  a {
    text-decoration: none;
  }

  @function rem($px, $base-font-size: 100px) {
    @return $px / $base-font-size * 1rem;
  }
  @function percent($px, $base-font-size: 750px) {
    @return $px / $base-font-size * 100%;
  }
</style>
